<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    class App extends React.Component{
        red={
            backgroundColor:"red"
        }
        blue={
            backgroundColor:"blue"
        }
        state={
            list:[1,2,3,4,5,6,7,8,9,10],
            // 保存当前点击的li索引
            activeIndex:0,
            styleLi:{}
        }
        render(){
            return (
                <div>
                  <ul>
                    {
                        this.state.list.map((item,index)=>{
                            // 当前点击的是谁  判断索引   点谁加谁效果 其它为空
                            return <li key={index} style={this.state.activeIndex===index?this.state.styleLi:{}} onClick={()=>this.clickLi(index)}>{item}</li>
                        })
                    }    
                  </ul>    
                </div>
            )    
        }
        // 判断 奇偶数
        clickLi(index){
            if(index %2===0){
             this.setState({
                activeIndex:index,
                styleLi:this.blue
            })
            }else{
                this.setState({
                activeIndex:index,
                styleLi:this.red
            })
            }
          
        }
    }

    ReactDOM.render(<App/>,document.getElementById("root"))
</script>
</html>